<template>
	<div class="tmpl">
		<!-- 1.0标题 -->
		<div class="title">
			<h2>积分三级地方是就</h2>
			<p class="otitle">
				{{imgdata.add_time | fmtdate('YYYY-MM-DD')}}
				{{imgdata.click}}次浏览
			</p>
		</div>

		<!-- 2.0使用mui的九宫格实现属于这个图片的其他相关图片 -->
	  	<ul class="mui-table-view mui-grid-view mui-grid-9">
			<li v-for="(item, index) in imglist" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
				<!-- vue-preview组件 -->
				<img class="preview-img"  :src="item.src" height="100" @click="$preview.open(index, imglist)">
            </li>
        </ul> 
		<!-- 3.0展示图片的详情描述 -->
		<div class="content" v-html='imgdata.content'>
		</div>
		<!-- 4.0这个图片的评论组件 -->
		<subcomment :artid = 'imgid'></subcomment>
	</div>
</template>

<style scoped>
	.title {
		padding: 10px;
		border-bottom: 1px solid rgba(92,92,92,0.2);
	}
	.title h2{
		color:#0094ff;
		font-size:16px;
	}
	.title .otitle {
		font-size: 12px;
		color: rgba(92,92,92,0.8);
	}
	/* 九宫格样式重写 */
	.mui-grid-view.mui-grid-9 {
		background-color: #fff;
	}
	.mui-grid-view.mui-grid-9 .mui-table-view-cell{
		border-right: none;
		border-bottom: none;
		padding: 0;
	}
	/* 图片描述样式 */
	.content{
		padding: 0;
		color: #5c5c5c;
	}
</style>

<script>
	import common from '../../kits/common.js';
	// 导入评论组件
	import subcomment from '../subcomp/subcomment.vue';
	export default{
		data(){
			return{
				imgdata:{},//代表着张图片的详细描述信息
				imglist:[], //九宫格图片存储数组
				imgid:0 // 出入评论组件中的图片id
			}
		},
		created(){
			this.getimgdata(); // 根据图片id获取图片的详细对象
			this.getthumbimgs(); // 获取九宫格中的图片
			// 将图片id初始化
			this.imgid = this.$route.params.id;
		},
		components:{
			subcomment,// 注册评论组件
		},
		methods:{
			getimgdata(){
				// 1.0获取到图片的id
				let id = this.$route.params.id;
				// 2.0 发出ajax请求获取到数据
				let url = common.apihost + "/api/getimageInfo/" + id;
				this.$http.get(url).then(res=>{
					this.imgdata =  res.body.message[0];
				});
			},
			getthumbimgs(){	
				//获取到图片的id
				let id = this.$route.params.id;
				let url = common.apihost + '/api/getthumimages/' + id;
				this.$http.get(url).then(res=>{
					//2.0 res.body.message中返回的是一个数组[{src:'/upload/'....'}]，需要加前缀
					res.body.message.forEach(item=>{
						item.src = common.imghost + item.src;
						//vue-preview组件要求数据有宽高，所有h和w要动态加载
						item.h = 400;
						item.w = 600;
					});
					// 将res.body.message赋值给this.imglist
					this.imglist = res.body.message;
				});	
			}
		}
	}
</script>